<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '我的订单',
  },
}
</route>

<template>
  <view>
    <wd-img
      class="w-full absolute! top-0 -z-1"
      :height="170"
      src="/static/images/ic_app_background.png"
    />
    <!-- 待支付信息 -->
    <view class="flex py-3 px-6 items-center justify-between">
      <!-- 文字 -->
      <view class="flex flex-col gap-1">
        <text class="text-white text-2xl">待支付</text>
        <text class="text-white opacity-80 text-xs">您提交了订单，请等待系统确认</text>
        <text class="text-neutral-1 opacity-75 text-xs">2024/5/14 14:54:44</text>
      </view>
      <!-- 图 -->
      <view class="flex items-center gap-3">
        <wd-img :width="50" :height="45" src="/static/images/ic_pay_bag.png"></wd-img>
        <wd-img :width="12" :height="25" src="/static/images/ic_white_arrow.png"></wd-img>
      </view>
    </view>

    <!-- 地址信息 -->
    <address-card :address="addressStore.defaultAddress" @click="handleClick" />

    <!-- 商品详情 -->
    <order-card />

    <!-- 金额 -->
    <wd-card custom-title-class="p-2!" custom-footer-class="p-2!">
      <view class="flex flex-col text-black gap-1">
        <view class="flex justify-between">
          <text>商品金额</text>
          <text>￥6399</text>
        </view>
        <view class="flex justify-between">
          <text>运费</text>
          <text>￥0.00</text>
        </view>
        <view class="flex justify-between">
          <text>实付款</text>
          <text>￥6399</text>
        </view>
      </view>
    </wd-card>

    <!-- 提交按钮 -->
    <view class="fixed bottom-0 left-0 right-0 flex justify-between items-center m-2">
      <text class=""></text>
      <wd-button class="m-0" @click="submitOrder">去支付</wd-button>
    </view>

    <address-action-sheet v-model="show" />
  </view>
</template>

<script lang="ts" setup>
import AddressCard from '@/components/address-card.vue'
import OrderCard from '@/components/order-card.vue'
import AddressActionSheet from '@/components/address-action-sheet.vue'
import { useAddressStore } from '@/store'

const addressStore = useAddressStore()

const show = ref(false)
const handleClick = () => {
  show.value = true
}

const submitOrder = () => {
  uni.showToast({
    title: '支付成功',
    icon: 'success',
  })

  // 等待加载
  uni.showLoading({
    title: '加载中',
  })

  setTimeout(() => {
    uni.hideLoading()
    uni.reLaunch({ url: '/pages/cart/cart' })
  }, 1000)
}
</script>

<style lang="scss" scoped>
//
</style>
